<template>
	<view class="chat">
		<view class="message_top">
			<view class="message_top_title" :style="{top:computedTop2}">
				<view class="fler">
					<image src="../../static/mor.png" class="bfbimages"></image>
				</view>
				<view>
					<text style="display: inline-block;margin-top: 6rpx;">本部烧烤</text><br />
					<text style="font-size: 24rpx;color: #FF6421;">饭店</text>
				</view>
			</view>
			<view class="message_top_back" :style="{top:computedTop}" @click="Back">
				<image src="../../static/search/back.png" class="bfbimages"></image>
			</view>
		</view>




		<view class="chat_body" :style="{height:HeightE}">

			<view class="chat_body_nr">
				<view class="chat_body_nr_date">2018-10-31 17:38</view>
				<view class="chat_body_nr_L">
					<view class="chat_body_nr_L_src"></view>
					<!-- 文本 -->
					<!-- <view class="chat_body_nr_L_tex">可以的,我们今天正常营业!</view> -->

					<!-- 图片 -->
					<!-- <view class="chat_body_nr_L_image flex">
						<image src="../../static/index/delete.png" class="bfbimages"></image>
					</view> -->

					<!-- 视频 -->
					<!-- <view class="chat_body_nr_L_vadio flex">
						<image src="../../static/index/delete.png" class="bfbimages"></image>
					</view> -->

					<!-- 定位 -->
					<view class="chat_body_nr_L_map">
						<view class="flex">
							<map id="myMap" style="width:100%;height:100%;" :markers="markers" @markertap="onMarkerTap"
								:latitude="latitude" :longitude="longitude" :scale="scale"></map>
						</view>
					</view>
				</view>
			</view>

			<view class="chat_body_nr" v-for="(item,index) in 15" :key="index">
				<view class="chat_body_nr_date">2018-10-31 17:38</view>
				<view class="chat_body_nr_R">
					<!-- 文本 -->
					<view class="chat_body_nr_L_tex"
						style="background: linear-gradient( 270deg, #FE4624 0%, #FF8143 100%);color: #FFFFFF;">
						老板今天的优惠券能用吗,发一下你们的位置,我下午过去</view>

					<!-- 图片 -->
					<!-- <view class="chat_body_nr_L_image flex">
							<image src="../../static/index/delete.png" class="bfbimages"></image>
						</view> -->

					<!-- 视频 -->
					<!-- <view class="chat_body_nr_L_vadio flex">
							<image src="../../static/index/delete.png" class="bfbimages"></image>
						</view> -->

					<!-- 定位 -->
					<!-- <view class="chat_body_nr_L_map">
							<view class="flex">
								<map id="myMap" style="width:100%;height:100%;" :markers="markers" @markertap="onMarkerTap" :latitude="latitude" :longitude="longitude" :scale="scale"></map>
							</view>
						</view> -->

					<view class="chat_body_nr_L_src" style="margin-left: 20rpx;"></view>
				</view>
			</view>

			<view style="width: 100%;height: 35rpx;"></view>

		</view>




		<view class="chat_bto">
			<view class="chat_bto_input">
				<input type="text" placeholder="请输入消息内容..." />
				<view style="display: flex;align-items: center;justify-content: flex-end;">

					<view class="chat_bto_input_icon flex">
						<image src="../../static/B.png" class="bfbimages"></image>
					</view>

					<view class="chat_bto_input_icon flex" style="margin-left: 40rpx;" @click="Jia(1)"
						v-if="!functionE">
						<image src="../../static/J.png" class="bfbimages"></image>
					</view>

					<view class="chat_bto_input_icon flex" style="margin-left: 40rpx;" @click="Jia(2)" v-if="functionE">
						<image src="../../static/X.png" class="bfbimages"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="chat_bto_selete" v-if="functionE">
			<view class="chat_bto_selete_list">
				<view>
					<view class="flex">
						<image src="../../static/W.png" class="bfbimages"></image>
					</view>
					<view style="width: 100%;height: auto;text-align: center;margin-top: 10rpx;">图片</view>
				</view>
				<view style="margin-left: 120rpx;">
					<view class="flex">
						<image src="../../static/M.png" class="bfbimages"></image>
					</view>
					<view style="width: 100%;height: auto;text-align: center;margin-top: 10rpx;">位置</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: null,
				functionE: false,
				HeightE: `calc(100vh - 410rpx)`,
				latitude: 34.747201, //纬度
				longitude: 113.625000, //经度
				scale: 14, //地图缩放程度
				markers: [],
			}
		},
		computed: {
			computedTop() {
				if (this.menuButtonInfo) {
					return `${this.menuButtonInfo.height * 2 - 6}px`;
				}
				return '0px';
			},
			computedTop2() {
				if (this.menuButtonInfo) {
					return `${this.menuButtonInfo.height * 2 - 16}px`;
				}
				return '0px';
			},
		},
		onLoad() {
			const info = uni.getMenuButtonBoundingClientRect();
			this.menuButtonInfo = info;
		},
		methods: {
			Jia(type) {

				if (type == 1) {
					this.functionE = true
				} else {
					this.functionE = false
				}

				console.log(this.functionE, 'this.functionE');
				if (this.functionE == true) {
					this.HeightE = `calc(100vh - 596rpx)`
				} else {
					this.HeightE = `calc(100vh - 410rpx)`
				}
				this.$forceUpdate()
			},
			Back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.chat {
		width: 100vw;
		height: 100vh;
		background-color: #FFFFFF;
		overflow: hidden;

		.message_top {
			width: 100%;
			height: 200rpx;
			position: relative;

			.message_top_title {
				width: 550rpx;
				position: absolute;
				left: 94rpx;
				z-index: 2;
				display: flex;
				align-items: center;
			}

			.message_top_title>view:nth-child(1) {
				width: 72rpx;
				height: 72rpx;
				margin-right: 20rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.message_top_title>view:nth-child(2) {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 32rpx;
				color: #333333;
			}

			.message_top_back {
				width: 44rpx;
				height: 44rpx;
				position: absolute;
				left: 30rpx;
				z-index: 9;
			}
		}

		.chat_body {
			width: 100%;
			// background-color: orchid;
			background-color: #FFFFFF;
			overflow-y: scroll;

			.chat_body_nr {
				width: 100%;
				height: auto;
				padding-top: 20rpx;

				.chat_body_nr_date {
					width: 100%;
					height: auto;
					text-align: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
				}

				.chat_body_nr_R {
					width: 100%;
					display: flex;
					align-items: flex-start;
					justify-content: flex-end;
					margin-top: 20rpx;
				}

				.chat_body_nr_L {
					width: 100%;
					display: flex;
					align-items: flex-start;
				}

				.chat_body_nr_L_src {
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 20rpx;
					background-color: green;
					margin-left: 20rpx;
				}

				.chat_body_nr_L_tex {
					min-width: 0;
					max-width: 490rpx;
					background: #F7F7F7;
					border-radius: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					padding: 20rpx 30rpx 20rpx 30rpx;
					background-color: violet;
				}

				.chat_body_nr_L_image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
					background-color: green;
					text-align: center;
					line-height: 200rpx;
					overflow: hidden;
				}

				.chat_body_nr_L_vadio {
					width: 300rpx;
					height: 200rpx;
					border-radius: 20rpx;
					background-color: green;
					text-align: center;
					line-height: 200rpx;
					overflow: hidden;
				}

				.chat_body_nr_L_map {
					width: 450rpx;
					height: 350rpx;
					border-radius: 20rpx;
					background-color: green;
					text-align: center;
					line-height: 350rpx;
					overflow: hidden;
				}

				.chat_body_nr_L_map>view:nth-child(1) {
					width: 100%;
					height: 350rpx;
					overflow: hidden;
				}
			}
		}

		.chat_bto {
			width: 100%;
			height: 190rpx;
			background-color: #FFFFFF;
			padding-top: 20rpx;

			.chat_bto_input {
				width: 670rpx;
				height: 110rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(0, 0, 0, 0.17);
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 20rpx;
				padding-right: 20rpx;
				margin: 0 auto;

				.chat_bto_input_icon {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					overflow: hidden;
				}
			}
		}

		.chat_bto_selete {
			width: 100%;
			height: 226rpx;
			background-color: #FFFFFF;

			.chat_bto_selete_list {
				width: 630rpx;
				height: 100rpx;
				margin: 0 auto;
				display: flex;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #333333;
			}

			.chat_bto_selete_list>view {
				width: 64rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
			}

			.chat_bto_selete_list>view>view:nth-child(1) {
				width: 64rpx;
				height: 64rpx;
				text-align: center;
				line-height: 64rpx;
			}
		}
	}
</style>